<template>
  <div class="main-body">
    <h2>
      <i class="iconfont iconlatestbrand_icon_new" />
      <em class="blue-text">最新</em>入驻品牌 • Latest Brand
      <button>查看更多</button>
    </h2>
    <ul class="clearfix">
      <!--      <li v-for="item in lists" :key="item.name">-->
      <!--        <img :src="item.src" alt="">-->
      <!--        <p>{{ item.name }}</p>-->
      <!--      </li>-->
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
      <li>
        <div class="img-wrapper">
          <img src="../../../assets/img/home/disnep.png" alt="">
        </div>
        <p>迪士尼</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'NewBrand',
  data() {
    return {
      lists: [
        {
          src: '../../../../public/disnep.png',
          name: '迪士尼'
        },
        {
          src: '../../../../public/disnep.png',
          name: '派勒斯'
        },
        {
          src: '../../../../public/disnep.png',
          name: '李宁'
        },
        {
          src: '../../../../public/disnep.png',
          name: '阿迪'
        },
        {
          src: '../../../../public/disnep.png',
          name: '真维斯'
        }
      ]
    }
  }

}
</script>

<style lang="scss" scoped>
    @import "../../../assets/template-item1/css/base";

    .main-body {
        @include panel;
        h2{
            button{
                float: right;
                @include btn;
                margin-top: 25px;
            }
        }
        ul {
            li {
                width: 190px;
                height: 160px;
                padding: 9px 15px 15px;
                background: #fff;
                float: left;
                margin-left: 12px;
                margin-bottom: 14px;
                text-align: center;

                &:nth-child(6n+1) {
                    margin-left: 0px;
                }

                &:hover {
                    box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.1);
                }

                .img-wrapper {
                    width: 160px;
                    height: 90px;
                    margin: 0 auto 22px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                p {
                    font-size: 18px;
                    color: #333;
                }
            }
        }
    }
</style>
